<template>
  <el-card class="box-card">
    <breadcrumb :naviItems.sync="naviItems"></breadcrumb>
    <div class="container" v-if="showTable">
      <div class="table">
        <!-- 表格容器 -->
        <div class="container">
          <el-table v-loading="loading" border :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                    stripe max-height="700" style="width: 100%">
            <el-table-column :index="indexMethod" type="index" label="序号" width="100" ></el-table-column>

            <el-table-column prop="sydw" label="使用单位" width="300">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  {{ scope.row.sydw }}
                  <div slot="reference" class="name-wrapper">
                    <el-button  type="text"  style="text-decoration: underline; color: #606266"
                                @click="gotoDetail(scope.row.sydw)"  >{{ scope.row.sydw }}
                    </el-button>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column prop="dwdz" label="单位地址">
            </el-table-column>
            <el-table-column prop="gly" label="管理员"> </el-table-column>
            <el-table-column prop="lxdh" label="联系电话"> </el-table-column>
            <el-table-column prop="sbsl" label="设备总量"> </el-table-column>
<!--            <el-table-column prop="检验预报" label="检验预报"> </el-table-column>-->
          </el-table>
        </div>
      </div>
      <div class="page">
        <div class="container">
          <el-pagination
            background
            @size-change="pageSizeChange"
            @current-change="pageChange"
            :current-page="currentPage"
            :page-sizes="[10, 15, 20, 40]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
      </div>
    <div v-if="showDetail" style="width: 100%;height: 100%;">
      <detail v-bind:sydw="sydw" style="height: 100%"></detail>
    </div>
  </el-card>

</template>
<script>
//import { DataCloudSearchArgs, serachDataCloudList } from '../../../../api/guolu/data-cloud';
import Breadcrumb from '../../BreadCrumb/BreadCrumb.vue'
import detail from '../sydw/detail'
import SydwList from '../../../../../assets/SydwList.json'
export default {
  name: 'sydw',
  data() {
    return {
      //args: new DataCloudSearchArgs(),
      // tableData: [],
      showTable: true,
      showDetail: false,
      total: 10,
      currentPage: 1,
      pagesize:10,
      naviBasicItems: [{ text: '电站锅炉' },{ text: '云服用户',to:'/guolu/dataCloudService/sydw/list'}],
      naviItems: [],
      loading: false,
      tableData: [
      ]
    }
  },
  components: {
    Breadcrumb,detail
  },
  created() {
    (this.naviItems = [...this.naviBasicItems])
    this.tableData=SydwList;
    this.total=this.tableData.length
    //this.searchData()
  },
  methods: {
    indexMethod(index){
      return (this.currentPage-1)*this.pagesize+index+1
    },
    gotoDetail(SydwName) {
      this.sydw=SydwName;
      this.showTable=false;
      this.showDetail=true
    },
    // 向后端发请求获得数据
    // async searchData() {
    //   this.loading = true
    //   const res = await searchReocrdDataList()
    //   this.loading = false
    //   // console.log(res)
    //   const list = res.data
    //   this.tableData = list
    // },
    // 页面大小改变
    async pageSizeChange(pageSize) {
     // this.searchData()
      this.pagesize=pageSize
    },
    // 页数改变
    async pageChange(page) {

      this.currentPage = page
      //this.searchData()
    },
  },
}
</script>
<style lang="less" scoped>
div.container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  div.search {
    width: 100%;
    // height: 200px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    div.input {
      padding: 5px;
    }
  }
  div.btns {
    width: 100%;
    // height: 200px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    div.input {
      padding: 5px;
    }
  }
  div.table {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    div.container {
      width: 95.5%;
      position: relative;
      left: -15px;
    }
  }
  div.page {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    position: relative;
    right: 70px;
  }
    //iconfont的使用
  /*@font-face {*/
  /*  font-family: 'iconfont';*/
  /*  src: url('../../../../icons/iconfont/iconfont.woff2?t=1625151297720') format('woff2'),*/
  /*  url('../../../../icons/iconfont/iconfont.woff?t=1625151297720') format('woff'),*/
  /*  url('../../../../icons/iconfont/iconfont.ttf?t=1625151297720') format('truetype');*/
  /*}*/
  /*.iconfont {*/
  /*  font-family: "iconfont" !important;*/
  /*  font-size: 25px;*/
  /*  color: #0099ff;*/
  /*  font-style: normal;*/
  /*  -webkit-font-smoothing: antialiased;*/
  /*  -moz-osx-font-smoothing: grayscale;*/
  /*}*/
}
</style>
